<!-- 字体切换大小
 子组件传递了size属性给父组件
-->
<template>
    <div>
        <el-dropdown @command="handleCommand" trigger="click">
            <span class="el-dropdown-link" title="字体">
                <i class="iconfont icon-zitidaxiao"></i>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item :icon="CaretRight" command="large" :disabled="size=='large'">超大</el-dropdown-item>
                    <el-dropdown-item :icon="CaretRight" command="default" :disabled="size=='default'">默认</el-dropdown-item>
                    <el-dropdown-item :icon="CaretRight" command="small" :disabled="size=='small'">较小</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
import {CaretRight} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const size = ref("default")
size.value = localStorage.getItem("size") as string  //刷新的时候把存储起来的值赋给size
const emit = defineEmits<{(e:"changeSize",size:string):void}>() //把size属性传递给父组件
const handleCommand = (e:string)=>{
    size.value = e
    localStorage.setItem("size",e)
    emit("changeSize",e)
    ElMessage.success("设置成功")
}
</script>
<style scoped>
.block-col-2 .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}
.el-dropdown-link:hover{
    cursor: pointer;
}
</style>